<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
    <link rel="stylesheet" href="/static/css/room.css">
</head>
<body>
   <div class="welcome">
        <p class="">
            欢迎
            <span id="user1"></span>
            与
            <span id="user2"></span>
            进入聊天室
        </p>
   </div>
    <!-- 定位距离 -->
    <div class="position">

    </div>


   <!-- 输入框 -->

    <div class="user-input">
        <div id="tool">
            <textarea name="" required lay-verify="required"  autoHeight="true"  placeholder="请输入" class="layui-textarea"></textarea>
            <i class="layui-icon layui-icon-add-circle-fine"></i>
            <button type="button" class="layui-btn layui-btn-normal" >发送</button>
        </div>
    </div>
</body>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

    $.fn.autoHeight = function(){
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            if (elem.scrollHeight<=200){
                elem.style.height = elem.scrollHeight + 'px';
            }else{
                elem.style.height = 200 +'px';
            }
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });
    }
    $('textarea[autoHeight]').autoHeight();
</script>
</html>